<template>
	<view class="amount-module">
		<view class="accumulated-amount-wrapper">
			<view class="title">
				累计提现金额（元)
			</view>
			<view class="value">
				￥{{total}}
			</view>
		</view>
		<view class="withdrawal-amount-wrapper">
			<view class="title-wrapper">
				可提现金额（元）
			</view>
			<view class="bottom-wrapper">
				<view class="amount-left-wrapper">
					<view class="amount">
						￥{{amount}}
					</view>
					<view class="unwithdrawal-amount">
						未提现金额 ￥{{amount}}
					</view>
				</view>
				<view class="withdrawal-btn-wrapper">
					<g-button btn_text="申请提现" :height="70" :borderRadius="16" :width="188"
						@click="withdrawal"></g-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps, computed } from 'vue';
	import { WITHDRAWAL_WAY } from '@/enum/withdrawal';
	import { useStore } from 'vuex';

	const store = useStore();

	interface IProps {
		withdrawal_way : WITHDRAWAL_WAY,
	}

	const props = withDefaults(defineProps<IProps>(), {
		withdrawal_way: WITHDRAWAL_WAY.RED_PACKET_BALANCE
	})

	const amount = computed(() => {
		switch (Number(props.withdrawal_way)) {
			case WITHDRAWAL_WAY.RED_PACKET_BALANCE:
				return store.state.userInfo.red_packet_balance;
			case WITHDRAWAL_WAY.BASIC_BALANCE:
				return store.state.userInfo.balance;
			case WITHDRAWAL_WAY.SUPPORT:
				return store.state.userInfo.subsidy_balance;
		}
	})
	
	const total = computed(() => {
		switch (Number(props.withdrawal_way)) {
			case WITHDRAWAL_WAY.RED_PACKET_BALANCE:
				return store.state.userInfo.redpacket_accumulative;
			case WITHDRAWAL_WAY.BASIC_BALANCE:
				return store.state.userInfo.balance_accumulative;
			case WITHDRAWAL_WAY.SUPPORT:
				return store.state.userInfo.subsidy_accumulative;
		}
	})
	
	


	const withdrawal = () => {
		uni.router.route({
			url: '/pages_withdrawal/withdrawal/withdrawal',
			params: {
				type: props.withdrawal_way,
			}
		})
	}
</script>

<style scoped lang="scss">
	@import "./amountModule.scss";
</style>